<template>
    <div class="silder-right">
        <div id="listRightTip" ref="listRightTip" class="list-right">
            <div>
                <div class="list-heard">
                    <!-- 插槽 标题参数 -->
                    <slot name="rtitle"></slot>
                </div>
                <div class="list-right-div">
                    <slot name="button" class="right-solt-but"></slot>
                </div>
                <!-- 内容插槽 -->
                <slot></slot>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Model, Emit, Vue } from 'vue-property-decorator';

@Component({
    name: 'RiskRightModule02',
})
export default class RiskRightModule02 extends Vue {
    // 高度
    @Prop() rightHeight!: string;

    // 宽度
    @Prop() rightWidth!: string;

    private tipLeft: any;
}
</script>
<style lang="scss" scoped>
.list-right {
    background: #fff;
    height: 100%;
    border: 1px solid #cacaca;
    // position: absolute;
    width: 100%;

    .list-tip {
        height: 100%;
        width: 6px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: transparent;
        &:hover {
            cursor: w-resize;
        }
    }

    .list-heard {
        width: 100%;
        height: 34px;
        background: #e5e8eb;
        border: 1px solid #cacaca;
        padding-left: 10px;
        line-height: 34px;
        color: #222;
    }

    .list-right-div {
        border: 1px solid #cacaca;
        padding: 4px 10px;
        width: 100%;

        .right-input {
            width: 220px;
            margin-right: 20px;
        }

        .right-solt-but {
            margin-left: 10px;
        }
    }
}
</style>
